<template>
  <el-dialog :visible="isShowDialog" :title="formDate.id?'编辑房产':'添加房产'" @close="btnCancel">
    <el-form ref="form" :model="formDate" label-width="80px" :rules="rules">
      <el-form-item label="经纪" prop="agent">
        <el-select v-model="formDate.agent" placeholder="请选择">
          <el-option
            v-for="item in agentList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="分类" prop="category">
        <el-select v-model="formDate.category" placeholder="请选择">
          <el-option
            v-for="item in categoryList"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="标题" prop="title">
        <el-input v-model="formDate.title" />
      </el-form-item>
      <el-form-item label="标签" prop="tags">
        <el-tag
          v-for="tag in formDate.tags"
          :key="tag"
          closable
          :disable-transitions="false"
          @close="handleClose(tag)"
        >
          {{ tag }}
        </el-tag>
        <el-input
          v-if="inputVisible"
          ref="saveTagInput"
          v-model="inputValue"
          class="input-new-tag"
          size="small"
          @keyup.enter.native="handleInputConfirm"
          @blur="handleInputConfirm"
        />
        <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 新标签</el-button>
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-cascader
          v-model="formDate.address"
          :options="options"
          @change="handleChange"
        />
        <el-input v-model="arrCity" :disabled="true" placeholder="请输入内容" class="input-with-select" />
      </el-form-item>
      <el-form-item label="价格" prop="price">
        <el-input v-model="formDate.price" />
      </el-form-item>
      <el-form-item label="描述" prop="desc">
        <el-input v-model="formDate.desc" type="textarea" placeholder="请输入描述" />
      </el-form-item>
      <el-form-item label="内容" prop="content">
        <vue-editor v-model="formDate.content" />
      </el-form-item>
      <el-form-item label="介绍图片">
        <ImageUpload ref="photo" />
      </el-form-item>
      <el-form-item label="封面">
        <ImageUpload ref="image" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-row>
        <el-button type="primary" @click="btnOk">确定</el-button>
        <el-button @click="btnCancel">取消</el-button>
      </el-row>
    </template>
  </el-dialog>
</template>

<script>
import { VueEditor } from 'vue2-editor'
import { getPropertiesById, updateProperties, addProperties } from '@/api/property'
import citys from '@/api/constant/citys'
export default {
  components: { VueEditor },
  props: {
    isShowDialog: {
      type: Boolean,
      default: false
    },
    // 经纪人数据
    agentList: {
      type: Array,
      // Array或是Object
      default: () => []
    },
    // 分类
    categoryList: {
      type: Array,
      default: () => {}
    }
  },
  data() {
    return {
      inputValue: '',
      inputVisible: false,
      options: citys,
      arrCity: '',
      formDate: {
        id: '',
        agent: '',
        category: '',
        title: '',
        tags: [],
        address: '',
        price: '',
        desc: '',
        content: '',
        image: '',
        photos: ''
      },
      rules: {
        title: [
          { required: true, message: '请输入名称', trigger: 'blur' },
          { min: 5, max: 10, message: '长度在 5 到 10 个字符', trigger: 'blur' }
        ],
        category: [
          { required: true, message: '分类不能为空', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '地址不能为空', trigger: 'blur' }
        ],
        price: [
          { required: true, message: '价格不能为空', trigger: 'blur' }
        ],
        desc: [
          { required: true, message: '描述不能为空', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '内容不能为空', trigger: 'blur' }
        ]

      }
    }
  },
  methods: {
    handleClose(tag) {
      this.formDate.tags.splice(this.formDate.tags.indexOf(tag), 1)
    },
    showInput() {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    handleInputConfirm() {
      const inputValue = this.inputValue
      if (this.formDate.tags.indexOf(inputValue) !== -1) {
        this.$message.warning('标签已存在,请勿重复添加')
        return
      }
      if (inputValue) {
        this.formDate.tags.push(inputValue)
      }
      this.inputVisible = false
      this.inputValue = ''
    },
    handleChange(value) {
      this.arrCity = ''
      //   console.log(value, 'value')
      value.forEach(index => {
        this.arrCity += this.options[index].label
        this.options = this.options[index].children
      })
      this.options = citys
      this.formDate.address = this.arrCity
    },
    // =====================================================
    // 编辑回显数据
    async getPropertiesById(id) {
      this.formDate.id = id
      console.log(id, 162)
      const { data } = await getPropertiesById(id)
      this.formDate = { ...data, tags: data.tags.length ? data.tags : [] }
      this.formDate.category = this.formDate.category ? this.formDate.category.id : ''
      this.formDate.agent = this.formDate.agent?.id
      const newPhotoList = []
      this.formDate.photos.forEach(item => {
        newPhotoList.push({ url: item })
      })
      this.$refs.photo.fileList = newPhotoList
      this.$refs.image.fileList = [{ url: this.formDate.image }]
    },
    // 确定
    async btnOk() {
      const photoFile = this.$refs.photo.fileList.map(item => item.url)
      const imageFile = this.$refs.image.fileList
      console.log(photoFile)
      console.log(imageFile, 222)
      if (imageFile[0] && imageFile[0].status !== 'success') {
        this.$message.warning('请耐心等待图片上传完毕')
        return
      }
      if (this.formDate.id) {
        // 检验表单
        await this.$refs.form.validate()
        // 调取接口
        await updateProperties({
          ...this.formDate,
          image: imageFile[0] ? imageFile[0].url : '',
          photos: photoFile || ''
        })
        this.$message.success('编辑成功')
        this.$emit('update')
      } else {
        // 新增
        await this.$refs.form.validate()
        await addProperties({
          ...this.formDate,
          image: imageFile[0] ? imageFile[0].url : '',
          photos: photoFile || ''
        })
        this.$message.success('添加成功')
        this.$emit('add')
      }
    },
    // 取消事件
    btnCancel() {
      this.$refs.form.resetFields()
      this.$emit('update:isShowDialog', false)
      this.formDate = {
        agent: '',
        category: '',
        title: '',
        tags: [],
        address: '',
        price: '',
        desc: '',
        content: ''
      }
      this.$refs.photo.fileList = []
      this.$refs.image.fileList = []
    }
  }

}
</script>

<style lang='scss' scoped>
.editor{
    width: 400px;
}

</style>
